var option;
var agg_confirmed_series_options = []
var agg_death_series_options = []
var cumsum_confirmed_series_options = []
var cumsum_death_series_options = []
var max = 1000
var states_with_label = [
    'Washington', 'Oregon', 'California', 'Nevada',
    'Arizona', 'Utah', 'Montana', 'Wyoming', 'Colorado',
    'New Mexico', 'Texas', 'Oklahoma', 'Kansas',
    'Nebrasks', 'South Dakota', 'North Dakota',
    'Iowa', 'Missouri', 'Arkansas', 'Florida',
    'Puerto Rico', 'Alaska', 'North Carolina',
    'New york', 'Maine', 'Tennessee', 'New York',
    'Minnesota', 'Wisconsin', 'Georgia', 'Pennsylvania',
    'Virginia', 'South Carolina', 'Nefbraska',
    'Illinois', 'Ohio', 'Michigan', 'Alabama'
]
$(function() {
    var myChart = echarts.init(document.getElementById('map'));
    myChart.showLoading();

    function date_transformer(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '/' + m + '/' + d;
    }
    // 时间轴生成 从2020/1/21 到 2020/5/9
    var timeRange = []

    var base = +new Date(2020, 0, 21)
    var end = +new Date(2020, 4, 19)
    while (base <= end) {
        timeRange.push(date_transformer(new Date(base)))
        base += 24 * 3600 * 1000
    }

    for (var d = 0; d < timeRange.length; d++) {
        // 一天一个serires
        var cur_date = timeRange[d]

        var agg_confirmed_series_tmp = []
        var agg_death_series_tmp = []
        var cumsum_confirmed_series_tmp = []
        var cumsum_death_series_tmp = []

        for (var i = 0; i < Object.keys(data).length; i++) {
            // 对州的遍历
            var state = Object.keys(data)[i]

            if (cur_date in data[state]) {
                // console.log(state in states_with_label)
                agg_confirmed_series_tmp.push({
                    name: state,
                    value: data[state][cur_date]['agg_confirmed'],
                    label: { //标签样式设置
                        normal: {
                            show: states_with_label.indexOf(state) != -1,
                            formatter: function(params) { //标签内容
                                return params.name + ':' + params.value
                            },
                            // lineHeight: 20,
                            // backgroundColor:'rgba(255,255,255,.9)',
                            // borderColor: '#80cffd',
                            // borderWidth: '1',
                            // padding: [5, 15, 4],
                            color: data[state][cur_date]['agg_confirmed'] > max * 0.75 ? '#ffffff' : '#000000',
                            fontSize: 8,
                            // fontWeight:'normal',
                        },
                    }
                })

                agg_death_series_tmp.push({
                    name: state,
                    value: data[state][cur_date]['agg_death'],
                    label: { //标签样式设置
                        normal: {
                            show: states_with_label.indexOf(state) != -1,
                            formatter: function(params) { //标签内容
                                return params.name + ':' + params.value
                            },
                            color: data[state][cur_date]['agg_confirmed'] > max * 0.75 ? '#ffffff' : '#000000',
                            fontSize: 8,
                        },
                    }
                })

                cumsum_confirmed_series_tmp.push({
                    name: state,
                    value: data[state][cur_date]['cumsum_confirmed'],
                    label: { //标签样式设置
                        normal: {
                            show: states_with_label.indexOf(state) != -1,
                            formatter: function(params) { //标签内容
                                return params.name + ':' + params.value
                            },
                            color: data[state][cur_date]['agg_confirmed'] > max * 0.75 ? '#ffffff' : '#000000',
                            fontSize: 8,
                        },
                    }
                })

                cumsum_death_series_tmp.push({
                    name: state,
                    value: data[state][cur_date]['cumsum_death'],
                    label: { //标签样式设置
                        normal: {
                            show: states_with_label.indexOf(state) != -1,
                            formatter: function(params) { //标签内容
                                return params.name + ':' + params.value
                            },
                            color: data[state][cur_date]['agg_confirmed'] > max * 0.75 ? '#ffffff' : '#000000',
                            fontSize: 8,
                        },
                    }
                })


            } else {
                agg_confirmed_series_tmp.push({
                    name: state,
                    value: 0
                })

                agg_death_series_tmp.push({
                    name: state,
                    value: 0
                })

                cumsum_confirmed_series_tmp.push({
                    name: state,
                    value: 0
                })

                cumsum_death_series_tmp.push({
                    name: state,
                    value: 0
                })
            }

        }


        agg_confirmed_series_options.push({
            title: {
                text: "USA Covid-19 Daily Confirmed Cases by Day"
            },
            series: {
                name: cur_date,
                data: agg_confirmed_series_tmp
            }
        })
        agg_death_series_options.push({
            title: {
                text: "USA Covid-19 Daily Death Toll by Day"
            },
            series: {
                name: cur_date,
                data: agg_death_series_tmp
            }
        })
        cumsum_confirmed_series_options.push({
            title: {
                text: "USA Covid-19 Total Confirmed Cases by Day"
            },
            series: {
                name: cur_date,
                data: cumsum_confirmed_series_tmp,

            }
        })
        cumsum_death_series_options.push({
            title: {
                text: "USA Covid-19 Total Death Toll by Day"
            },
            series: {
                name: cur_date,
                data: cumsum_death_series_tmp
            }
        })


    }

    var countList = []

    for (var i = 0; i < usaJson['features'].length; i++) {

        countList.push(usaJson['features'][i]['properties']['name'])
    }

    myChart.hideLoading();

    echarts.registerMap('USA', usaJson, {
        Alaska: { // 把阿拉斯加移到美国主大陆左下方
            left: -131,
            top: 25,
            width: 15
        },
        Hawaii: {
            left: -110, // 夏威夷
            top: 28,
            width: 5
        },
        'Puerto Rico': { // 波多黎各
            left: -76,
            top: 26,
            width: 2
        }
    });

    option = {
        baseOption: {
            title: {
                text: 'USA Covid-19',
                subtext: 'Data from www.kaggle.com/',
                sublink: 'https://www.kaggle.com/',
                left: 'right'
            },
            tooltip: {
                trigger: 'item',
                showDelay: 0,
                transitionDuration: 0.2,
                /*
                formatter: function(params) {
                    var value = (params.value + '').split('.');
                    value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                    return params.seriesName + '<br/>' + params.name + ': ' + value;
                }
                */
            },
            visualMap: {
                left: 'right',
                min: 0,
                max: 1000,
                inRange: {
                    color: ['#f2f2f2', '#ffe281', '#ffb54d', '#fe5517', '#ff1b1b', '#970a0a', '#6b0707']
                },
                text: ['High', 'Low'], // 文本，默认为数值文本
                calculable: true
            },
            toolbox: {
                show: true,
                //orient: 'vertical',
                left: 'left',
                top: 'top',
                feature: {
                    dataView: {
                        readOnly: false
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            // * timeline和series的data数量相挂钩
            timeline: {
                axisType: 'category',
                autoPlay: true,
                currentIndex: 70,

                playInterval: 1000,
                // 从2020/1/21 到 2020/5/9
                data: timeRange


            },

            series: [{
                avoidLabelOverlap: true,
                type: 'map',
                roam: true,
                map: 'USA',
                emphasis: {
                    label: {
                        show: true
                    }
                },
                // label: { //标签样式设置
                //     normal: {
                //         show: true,
                //         formatter: function(params) { //标签内容
                //             return params.name + ':' + params.value
                //         },
                //         // lineHeight: 20,
                //         // backgroundColor:'rgba(255,255,255,.9)',
                //         // borderColor:'#80cffd',
                //         // borderWidth:'1',
                //         // padding: [5, 15, 4],
                //         // color:'#000000',
                //         fontSize: 10,
                //         // fontWeight:'normal',
                //     },
                // },
                // 文本位置修正
                textFixed: {
                    Alaska: [20, -20]
                }
            }]

        },
        options: agg_confirmed_series_options

    };

    myChart.setOption(option);


    function deactivateAll() {
        document.getElementById("agg_confirmed").className = "nav-link";
        document.getElementById("agg_death").className = "nav-link";
        document.getElementById("cumsum_confirmed").className = "nav-link";
        document.getElementById("cumsum_death").className = "nav-link";
    }
    // 设置navibar的监听
    $("#agg_confirmed").click(function() {
        deactivateAll()
        document.getElementById("agg_confirmed").className = "nav-link active";
        option.options = agg_confirmed_series_options
        option.baseOption.visualMap.max = 1000
        myChart.setOption(option);
        $('body,html').animate({
            scrollTop: 680
        })
    })

    $("#agg_death").click(function() {
        deactivateAll()
        document.getElementById("agg_death").className = "nav-link active";
        option.options = agg_death_series_options
        option.baseOption.visualMap.max = 500
        myChart.setOption(option);
        $('body,html').animate({
            scrollTop: 680
        })
    })

    $("#cumsum_confirmed").click(function() {
        deactivateAll()
        document.getElementById("cumsum_confirmed").className = "nav-link active";
        option.options = cumsum_confirmed_series_options
        option.baseOption.visualMap.max = 100000
        myChart.setOption(option);
        $('body,html').animate({
            scrollTop: 680
        })
    })

    $("#cumsum_death").click(function() {
        deactivateAll()
        document.getElementById("cumsum_death").className = "nav-link active";
        option.options = cumsum_death_series_options
        option.baseOption.visualMap.max = 5000
        myChart.setOption(option);
        $('body,html').animate({
            scrollTop: 680
        })
    })
})